<template>
  <div class="occupied-container flex flex-col items-center justify-center h-full bg-white">
    <img src="@/assets/images/occupied_empty.png" alt="occupied" />
    <div v-if="newMerchantStatus === OccupiedStatusEnum.TO_FILL" class="occupied-title">
      你还没有完善信息
      <text class="text-color-primary underline cursor-pointer" @click="toMyIndex">去完善</text>
      之后才可以查看并使用哦
    </div>
    <div v-if="newMerchantStatus === OccupiedStatusEnum.NOT_AUDITED" class="occupied-title">
      你的信息已上传，请耐心等待审核
    </div>
    <div v-if="newMerchantStatus === OccupiedStatusEnum.FAILED" class="occupied-title">
      你的信息已驳回,请
      <text class="text-color-primary underline cursor-pointer" @click="toMyIndex">重新提交</text>
    </div>
    <div v-if="newMerchantStatus === OccupiedStatusEnum.RE_LOGIN" class="occupied-title">
      您的资质信息已通过审核，
      <text class="text-color-primary underline cursor-pointer" @click="loginOut">重新登录</text>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { OccupiedStatusEnum } from "@/enums/occupied";
import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();
function loginOut() {
  userStore.logout();
  router.push("/login");
}
defineOptions({
  name: "Occupied",
});
const props = defineProps({
  merchantStatus: {
    type: Number,
    default: 0,
  },
});
const router = useRouter();
// 跳转到主页
function toMyIndex() {
  router.push({ path: "/hide/hide" });
}
let newMerchantStatus = ref(props.merchantStatus);
watch(
  () => props.merchantStatus,
  async () => {
    //await funcGetMerchantStatus();
    nextTick(() => {
      newMerchantStatus.value = props.merchantStatus;
      console.log(newMerchantStatus.value);
    });
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.occupied-container {
  .occupied-title {
    color: #9e9e9e;
  }
}
</style>
